<script setup lang="ts">
import { onMounted } from 'vue';
import { useGeneral } from '@/hooks/useGeneral';
import { useOptimizedIframeMessage } from '@/hooks/useOptimizedIframeMessage';
import ThingJSPopupContainer from '@/components/ThingJSPopupContainer/index.vue';

const { moduleLeft, moduleRight, flexStyle } = useGeneral();
const { messenger } = useOptimizedIframeMessage();

// 安全的postMessage处理函数
const handlePostMessage = (data: any, name: string, type: string = '') => {
  try {
    // 检查messenger是否可用
    if (messenger && typeof messenger.notify === 'function') {
      messenger.notify(name, { data, type, timestamp: Date.now() });
    } else {
      console.warn('⚠️ messenger未初始化或notify方法不可用:', { messenger, name, data });
    }
  } catch (error) {
    console.error('💥 postMessage发送失败:', error, { name, data, type });
  }
};

onMounted(() => {
  console.log('✅ Vue应用与ThingJS通信已就绪');
});
</script>

<template>
  <div class="mid-container">
    <QuanTopComponent class="topComponents-box" @postMessage="handlePostMessage" />
    <div class="side-container left">
      <div
        v-for="item in moduleLeft"
        :key="item.id"
        :class="['box', item.title === '管网风险分级(km)' ? 'box1' : item.title === '管线监测力量' ? 'box2' : '']"
      >
        <div class="title">{{ item.title }}</div>
        <div class="content">
          <component :is="item.components" @postMessage="handlePostMessage"></component>
        </div>
      </div>
    </div>
    <div class="side-container right">
      <div v-for="item in moduleRight" :key="item.id" class="box" :style="flexStyle(item)">
        <div class="title">{{ item.title }}</div>
        <div class="content">
          <component :is="item.components" @postMessage="handlePostMessage"></component>
        </div>
      </div>
    </div>
    <QuanRouterButton class="router-box" />

    <!-- ThingJS 弹窗容器 -->
    <ThingJSPopupContainer />
  </div>
</template>

<style scoped lang="scss">
.mid-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 50px;
  position: relative;

  .topComponents-box {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
  }

  .router-box {
    z-index: 4;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
  }
}

.side-container {
  z-index: 5;
  flex: 0 0 25%;
  padding: 20px;
  background: linear-gradient(270deg, rgba(9, 48, 111, 0.4) 0%, rgba(9, 48, 111, 0.8) 100%);
  box-shadow: 0px 0px 20px #09306f;
  opacity: 1;
  border-radius: 6px;
  box-sizing: border-box;

  .box {
    height: 33.3%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .title {
      width: 100%;
      background: url(@/assets/largescreen/title-pic.png) no-repeat center center;
      background-size: cover;
      padding-left: 5%;
      font-size: 20px;
      color: white;
      line-height: 38px;
      font-family: PangMenZhengDao;
    }

    .content {
      font-size: 14px;
      padding-top: 1.5rem;
      height: calc(100% - 1.5rem);
    }
  }

  .box1 {
    height: 45%;
  }

  .box2 {
    height: 100%;
  }
}

.left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
